import React,{useEffect,useMemo,useRef,useState} from 'react'
import AMapLoader from '@amap/amap-jsapi-loader';
import { useNavigate } from 'react-router-dom'
import './Atlas.css'
window._AMapSecurityConfig = {
    securityJsCode: "677720f6975e22e69950a358b20192b6"
  };
export default function Atlas() {
  const navigate=useNavigate()
    let map: any = null;
 
  const createMap = (AMap: any) => {
    //1.创建地图实例
    map = new AMap.Map('container', {
      // 设置地图容器id
      viewMode: '2D', // 是否为3D地图模式
      zoom: 10, // 初始化地图级别
      center: [115.484621, 38.818143], // 初始化地图中心点位置
      resizeEnable: true, // 调整大小启用
      //   layers: [new AMap.TileLayer.Satellite()], //设置图层,可设置成包含一个或多个图层的数组
      //   mapStyle: 'amap://styles/whitesmoke', //设置地图的显示样式
    });
 
    // 2.加载插件
    AMap.plugin(
      [
        'AMap.ToolBar',
        'AMap.Scale',
        'AMap.HawkEye',
        'AMap.ControlBar',
        'AMap.MapType',
        'AMap.Geolocation',
        'AMap.ContextMenu',
        'AMap.AutoComplete',
        'AMap.PlaceSearch',
      ],
      function () {
        //在回调函数中实例化插件，并使用插件功能
        // map.addControl(
        //   new AMap.ControlBar({
        //     position: {
        //       top: '10px',
        //       right: '10px',
        //     },
        //   }),
        // ); //控制罗盘
        map.addControl(new AMap.HawkEye()); //鹰眼
        map.plugin(["AMap.Geolocation"], function () {
          map.addControl(new AMap.Geolocation()); //定位当前位置插件； 用来获取和展示用户主机所在的经纬度位置；
        });
        map.plugin(["AMap.ToolBar"], function () {
          map.addControl(new AMap.ToolBar()); // 工具条控件;范围选择控件
        });
        map.addControl(
          new AMap.Geolocation({
            position: {
              bottom: '160px',
              left: '20px',
            },
          }),
        ); //定位控件，用来获取和展示用户主机所在的经纬度位置
        map.addControl(
          new AMap.ToolBar({
            position: {
              bottom: '80px',
              left: '21px',
            },
          }),
        ); //缩放工具条
        map.plugin(["AMap.MapType"], function () {
          map.addControl(new AMap.MapType()); //实现默认图层与卫星图、实施交通图层之间切换的控件
        });
        map.addControl(
          new AMap.Scale({
            position: {
              bottom: '35px',
              left: '20px',
            },
          }),
        ); //比例尺
 
        // map.addControl(
        //   new AMap.MapType({
        //     position: {
        //       bottom: '300px',
        //       right: '0',
        //     },
        //   }),
        // ); //类别切换控件
 
        //3.添加右键点击事件
        let contextMenu: any = null;
        //4.信息窗口
        let infoWindow: any = null;
 
        //地图绑定鼠标右击事件——弹出右键菜单
        map.on('rightclick', function (e: any) {
          infoWindow?.close(); //清空点击事件弹框
          let contextMenuPositon: any = null;
          contextMenu = new AMap.ContextMenu({ isOpen: false });
          //右键放大
          contextMenu?.addItem(
            '放大一级',
            function () {
              map.zoomIn();
            },
            0,
          );
 
          //右键缩小
          contextMenu?.addItem(
            '缩小一级',
            function () {
              map.zoomOut();
            },
            1,
          );
 
          //右键显示全国范围
          contextMenu?.addItem(
            '缩放至全国范围',
            function () {
              map.setZoomAndCenter(4, [108.946609, 34.262324]);
            },
            2,
          );
 
          //右键添加Marker标记
          contextMenu?.addItem(
            '添加标记',
            function () {
              new AMap.Marker({
                map: map,
                position: contextMenuPositon, //基点位置
              });
            },
            3,
          );
 
          contextMenu?.open(map, e.lnglat);
          contextMenuPositon = e.lnglat;
        });
 
        // //打开信息窗体
        // map.on('click', function (e: any) {
        //   contextMenu?.close(); //关闭右键弹框
        //   //构建信息窗体中显示的内容
        //   let info = [];
        //   info.push(
        //     '<div class=\'input-card content-window-card\'><div><img style="float:left;width:67px;height:16px;" src=" https://webapi.amap.com/images/autonavi.png "/></div> ',
        //   );
        //   info.push('<div style="padding:7px 0px 0px 0px;"><h4>高德软件</h4>');
        //   info.push(
        //     "<p class='input-item'>电话 : 010-84107000   邮编 : 100102</p>",
        //   );
        //   info.push(
        //     "<p class='input-item'>地址 :北京市朝阳区望京阜荣街10号首开广场4层</p></div></div>",
        //   );
 
        //   infoWindow = new AMap.InfoWindow({
        //     content: info.join(''), //使用默认信息窗体框样式，显示信息内容
        //   });
 
        //   infoWindow?.open(map, e.lnglat);
        // });


        // map.plugin(["AMap.MouseTool"], function () {
        //   var mouseTool = new AMap.MouseTool(map);
        //   mouseTool.rule();
        // });//用户手动绘制折线图，测量距离
 
 
        // 4.搜索
        let auto = new AMap.AutoComplete({ input: 'tipinput' });
        let placeSearch = new AMap.PlaceSearch({
          map: map,
        }); //构造地点查询类
        auto.on('select', function (e: any) {
          placeSearch.setCity(e.poi.adcode);
          placeSearch.search(e.poi.name); //关键字查询查询
        }); //注册监听，当选中某条记录时会触发
      },
    );
  };
 
  const onCatch = (e: any) => {
    console.log(e);
  };
 
  const mountMap = () => {
    map?.destroy(); //销毁地图
  };
 
  useEffect(() => {
    AMapLoader.load({
      key: '38d88b262c2b124d573acac5bb519686', // 申请好的Web端开发者Key，首次调用 load 时必填
      version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
    })
      .then(createMap)
      .catch(onCatch);
 
    return mountMap;
  }, []);

  return (
    <div className="map">
      <button className='fan' onClick={()=>{navigate('/drive')}}>返回</button>
      <div id="container" style={{ height: '100vh' }}></div>
      <input id="tipinput" placeholder="请输入搜索内容" />
    </div>
  )
}
